<template>
	<view>
		<view class="flex text-center text-white text-lg">
			<view class="title_btn flex-sub" @click="cut(1)" :style="{backgroundColor:title_color==1?bgCol2: ''}">我的余额
			</view>
			<view class="title_btn flex-sub" @click="cut(2)" :style="{backgroundColor:title_color==2?bgCol2: ''}">我的收益
			</view>
		</view>
		<view v-if="title_color==1" class="padding">
			<view class=" radius bg">
				<view class=" u-flex u-p-l-30 u-p-t-30 u-p-b-30">
					<view class="u-m-r-20">
						<u-avatar :src="avatar" size="80"></u-avatar>
					</view>
					<view class="u-flex-1 ">
						<view class="u-font-16 text-white text-bold">{{user.money}}币</view>
						<view class="u-font-14 u-m-t-10 u-tips-color" style="color: #A1A2B2;">金币用于订单支付</view>
					</view>
				</view>
			</view>
			<view class="margin-top radius bg flex justify-between flex-wrap padding-lr padding-bottom">
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">5</text>
					</view>
					<view>
						¥5
					</view>
				</view>
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">20</text>
					</view>
					<view>
						¥20
					</view>
				</view>
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">50</text>
					</view>
					<view>
						¥50
					</view>
				</view>
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">100</text>
					</view>
					<view>
						¥100
					</view>
				</view>
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">200</text>
					</view>
					<view>
						¥200
					</view>
				</view>
				<view class="flex justify-between padding-sm radius margin-top"
					style="color: #1789FD;background-color: #3B3D55; width: 46%;">
					<view class="flex">
						<u-image src="../static/jinbi.png" mode="" width="38upx" height="38upx"></u-image>
						<text class="margin-left-sm">500</text>
					</view>
					<view>
						¥500
					</view>
				</view>
			</view>
			<view class="btn">充值</view>
		</view>
		<view v-if="title_color==2" class="padding">
			<view class="bg radius text-white padding">
				<view class="text-lg">累计金币收入</view>
				<view class="flex margin-top-sm">
					<!-- <view class="text-xxl"></view> -->
					<view class="text-xxl" v-if="authPw=='y'">{{ money }}币</view>
					<view class="text-xxl" v-else-if="authPw!='y'">{{ money }}币</view>
				</view>
				<view class="margin-top-sm">可用余额: {{ userMoney }}币</view>
			</view>
			<view class="bg radius text-white padding margin-top">
				<view class="text-lg">提现金额</view>
				<view class="margin-top-sm"> <text class="text-xxl">{{ userMoney }}币</text> ={{ userMoney }}元</view>
			</view>
			<view class="btn1" v-if="userMoney>0" @click="goSuc(user)">立即提现</view>
			<view class="btn1" v-else-if="userMoney<=0" @click="goFail(user)">余额不足</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '',
				user: {},
				money: '',
				authPw: '',
				userMoney: '',
				id: '',
				title_color: 2,
				bgCol1: '#1E1F31',
				bgCol2: '#2E2F48',
				// fun:new Function()
			}
		},
		onShow() {
			this.id = uni.getStorageSync('userId');
			this.$myRequest({
					url: '/user/byId',
					data: {
						// 用户id
						id: this.id
					},
					method: "get",
				}).then(r => {
					// console.log(r);
					this.user = r.data.data;
					this.avatar = r.data.data.avr;
					this.authPw = r.data.data.authPw;
					this.userMoney = r.data.data.money;
					// this.$forceUpdate();
				}),
				this.$myRequest({
					url: '/user/getAllOrderMoney',
					data: {
						// 用户id
						uid: this.id
					},
					method: "get",
				}).then(r => {
					// console.log(r);
					if (r.data.data == null) {
						this.money = 0;
					} else {
						this.money = r.data.data;
					}
				})
		},
		methods: {
			cut(e) {
				this.title_color = e
			},
			goSuc(e) {
				this.$myRequest({
						url: '/user/withdrawPwMoney',
						data: {
							// 用户id
							id: this.id
						},
						method: "get",
					}).then(r => {
						console.log(r);
						// alert()
						uni.showToast({
								title: "提现成功",
								mask: true
							})
							setTimeout(function() {
								uni.redirectTo({
									url:"/my/wallet/index?id=" + this.id,
									success(r) {
										console.log("成功跳转",r);
									},
									fail(r) {
										console.log("失败跳转",r);
									}
								});
							},2000);
					});
					
					// ,
					// uni.navigateTo({
					// 	url: '/pages/index/index'
					// })
			},
			goFail(e) {
				uni.showToast({
					title: "余额不足，提现失败",
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.title_btn {
		height: 78upx;
		line-height: 78upx;
		background-color: #1E1F31;
	}

	.btn {
		width: 100%;
		height: 88upx;
		background: #1789FD;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		margin-top: 40upx;
		font-size: 28upx;
		color: #FFF;
	}

	.btn1 {
		width: 100%;
		height: 88upx;
		background: #A3B8CC;
		border-radius: 44upx;
		text-align: center;
		line-height: 88upx;
		margin-top: 40upx;
		font-size: 28upx;
		color: #FFF;
		font-weight: bold;
	}
</style>
